<template>
	<view class="content">
		<comtarbar class="comtarbar">
			<template #center>
				<view class="title">选择好友</view>
			</template>
			<template #right>
				<view class="btn" @tap="addMember">确定</view>
			</template>
		</comtarbar>
		<view class="main">
			<checkbox-group @change="checkboxChange">
				<template v-for="(value, key, index) in getFriends">
					<view class="ground" v-if="value.length > 0">
						<view class="ground-item" :id="key">{{ key }}</view>
						<view class="item" v-for="(item, index) in value" :key="item._id">
							<label :class="judge(item)?'noselect':''">
								<view class="select-item"><checkbox :disabled="judge(item)" :value="item.user._id" /></view>
								<view class="item-left">
									<view class="imgbox"><image :src="item.user.avatars" mode="aspectFill"></image></view>
								</view>
								<view class="item-right">{{ item.nickName }}</view>
							</label>
						</view>
					</view>
				</template>
			</checkbox-group>
		</view>
		<view class="alnavbar" @tap="clickAlnavbar($event)">
			<view class="al-item" data-value="top">↑</view>
			<view class="al-item" v-for="(item, index) in alphabet" :key="index" :data-value="item">{{ item }}</view>
		</view>
	</view>
</template>

<script>
import request from '../../../api/request.js';
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			alphabet: [],
			group_id: '',
			user_list:[]
		};
	},
	onLoad(options) {
		this.group_id = options.id;
		this.getAlphabet();
	},
	computed: {
		...mapGetters(['getFriends', 'getGroupInfo'])
	},
	methods: {
		// 生成左侧的字母导航条
		getAlphabet() {
			for (var i = 0; i < 26; i++) {
				let res = String.fromCharCode(65 + i);
				this.alphabet.push(res);
			}
		},
		
		// 点击左边的字母导航进行跳转
		clickAlnavbar(event) {
			uni.pageScrollTo({
				duration: 0,
				scrollTop: 0
			});
			if (event.target.dataset.value == 'top') {
				return;
			}
			let id = '#' + event.target.dataset.value;
			uni.createSelectorQuery()
				.select(id)
				.boundingClientRect(res => {
					if (res) {
						let top = res.top;
						uni.pageScrollTo({
							duration: 0,
							scrollTop: top - 40
						});
					}
				})
				.exec();
		},
		
		//多选框选中时触发的事件 
		checkboxChange(e) {
			this.user_list = e.detail.value
		},
		
		// 判断好友是否在群组中，在则返回false 不显示该好友
		judge(item) {
			let user_list = this.getGroupInfo.user_list;
			let index = user_list.findIndex(user => {
				return user.user._id == item.user._id;
			});
			if (index > 0) {
				return true;
			} else {
				return false;
			}
		},
		async addMember(){
			let res =await request({
				url:"/group/member/add",
				data:{
					id :this.group_id,
					list :this.user_list,
					token:uni.getStorageSync("token")
				},
				method:"POST"
			})
			if(res[1].data.nModified){
				uni.showToast({
					title:"好友邀请成功",
					duration:1000
				})
				this.$store.dispatch("getInfo",this.group_id)
				setTimeout(()=>{
					uni.navigateBack({
						delta: 1
					})
				},1200)
			}else{
				uni.showToast({
					title:"好友邀请失败",
					icon:"none",
					duration:1000
				})
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../../commons/css/mycss.scss';
.content {
	position: relative;
}
.comtarbar {
	background: #f4f4f4;
	.btn{
		height: 60rpx;
		width: 100rpx;
		background: #37a603;
		font-size: 32rpx;
		color: white;
		line-height: 60rpx;
		text-align: center;
		border-radius: 10rpx;
	}
}
.main {
	.item {
		height: 88rpx;
		margin: 10rpx 10rpx;
		position: relative;
		label {
			display: flex;
		}
		.select-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.item-left {
			flex: 2;
			display: flex;
			justify-content: center;
			overflow: hidden;
			.imgbox {
				height: 76rpx;
				margin: 6rpx;
				width: 76rpx;
				border-radius: 10rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.item-right {
			flex: 8;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 30rpx;
		}
	}
	.ground-item {
		background: rgb(221, 221, 221);
		height: 50rpx;
		color: rgb(99, 99, 99);
		font-size: 26rpx;
		line-height: 50rpx;
		text-indent: 46rpx;
	}
	.g_main .ground .item:not(:last-child) .item-right {
		border-bottom: 2rpx solid rgb(223, 223, 223);
	}
}
.main .ground .item label:not(:last-child) .item-right {
	border-bottom: 2rpx solid rgb(223, 223, 223);
}
.alnavbar {
	position: fixed;
	top: 50%;
	right: 20rpx;
	transform: translateY(-50%);
	z-index: 990;
	color: rgb(120, 120, 120);
	font-size: 24rpx;
	text-align: center;
	.al-item {
		margin: 4rpx 0rpx;
	}
}
checkbox-group {
	padding: 0rpx 20rpx;
	box-sizing: border-box;
}
label {
	display: flex;
	padding: 0 40rpx;
}
.noselect{
	opacity: 0.5;
}
</style>
